﻿@using DAL;
@using ExpressManagement.Areas.BackSys.ServiceTools;
@{
    ViewBag.Title = "注册页";
    Layout = "../Shared/_Layout.cshtml";
}
<div id="app">
    <div class="container">

        <form class="form-signin" action="index.html">
            <div class="form-signin-heading text-center">
                <h1 class="sign-title">Registration</h1>
                <img src="~/Content/BackSys/images/login-logo.png" alt="" />
            </div>


            <div class="login-wrap">
                <p>Enter your personal details below</p>


                <div v-if="TrueName" class=" has-success">
                    <input type="text" v-model="TrueName" autofocus="" placeholder="TrueName" class="form-control">
                    <span class="help-block">输入正确</span>
                </div>
                <div v-else class=" has-error">
                    <input type="text" v-model="TrueName" autofocus="" placeholder="TrueName" class="form-control">
                    <span class="help-block">输入不得为空</span>
                </div>


                <div v-if="Idcard" class=" has-success">
                    <input type="text" v-model="Idcard" autofocus="" placeholder="Idcard" class="form-control">
                    <span class="help-block">输入正确</span>
                </div>
                <div v-else class=" has-error">
                    <input type="text" v-model="Idcard" autofocus="" placeholder="Idcard" class="form-control">
                    <span class="help-block">输入不得为空</span>
                </div>

                <div v-if="Phone" class=" has-success">
                    <input type="text" v-model="Phone" autofocus="" placeholder="Idcard" class="form-control">
                    <span class="help-block">输入正确</span>
                </div>
                <div v-else class=" has-error">
                    <input type="text" v-model="Phone" autofocus="" placeholder="Idcard" class="form-control">
                    <span class="help-block">输入不得为空</span>
                </div>

                <div v-if="Email" class=" has-success">
                    <input type="text" v-model="Email" autofocus="" placeholder="Idcard" class="form-control">
                    <span class="help-block">输入正确</span>
                </div>
                <div v-else class=" has-error">
                    <input type="text" v-model="Email" autofocus="" placeholder="Idcard" class="form-control">
                    <span class="help-block">输入不得为空</span>
                </div>

                <div v-if="Address" class=" has-success">
                    <input type="text" v-model="Address" autofocus="" placeholder="Idcard" class="form-control">
                    <span class="help-block">输入正确</span>
                </div>
                <div v-else class=" has-error">
                    <input type="text" v-model="Address" autofocus="" placeholder="Idcard" class="form-control">
                    <span class="help-block">输入不得为空</span>
                </div>

                @*<div class="radios">
                        <label for="radio-01" class="label_radio col-lg-6 col-sm-6">
                            <input type="radio" checked="" value="1" id="radio-01" name="sample-radio"> Male
                        </label>
                        <label for="radio-02" class="label_radio col-lg-6 col-sm-6">
                            <input type="radio" value="1" id="radio-02" name="sample-radio"> Female
                        </label>
                    </div>*@

                <p> Enter your account details below</p>
                <div v-if="UserName" class=" has-success">
                    <input type="text" v-model="UserName" autofocus="" placeholder="UserName" class="form-control">
                    <span class="help-block">输入正确</span>
                </div>
                <div v-else class=" has-error">
                    <input type="text" v-model="UserName" autofocus="" placeholder="UserName" class="form-control">
                    <span class="help-block">输入不得为空</span>
                </div>

                <div v-if="UserPass" class=" has-success">
                    <input type="text" v-model="UserPass" autofocus="" placeholder="UserPass" class="form-control">
                    <span class="help-block">输入正确</span>
                </div>
                <div v-else class=" has-error">
                    <input type="text" v-model="UserPass" autofocus="" placeholder="UserPass" class="form-control">
                    <span class="help-block">输入不得为空</span>
                </div>
                <div v-if="ValUserPass&&ValUserPass==UserPass" class=" has-success">
                    <input type="text" v-model="ValUserPass" autofocus="" placeholder="ValUserPass" class="form-control">
                    <span class="help-block">输入正确</span>
                </div>
                <div v-else class=" has-error">
                    <input type="text" v-model="ValUserPass" autofocus="" placeholder="ValUserPass" class="form-control">
                    <span class="help-block">输入不得为空</span>
                </div>
                <label class="checkbox">
                    <input type="checkbox" v-model="AgreePolicy" value="agree this condition"> I agree to the Terms of Service and Privacy Policy
                </label>
                <button type="button" class="btn btn-lg btn-login btn-block" data-toggle="modal" data-target="#addModal">
                    <i class="fa fa-check"></i>
                </button>

                <div class="registration">
                    Already Registered.
                    <a href="@Url.Action("Login","Home")" class="">
                        Login
                    </a>
                </div>

            </div>

        </form>

    </div>
    <!-- 模态框示例（Modal） -->
    <form method="post" class="form-horizontal" role="form" id="form_data"  style="margin: 20px;">
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" onclick="trigger_stay()" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            注册信息提交确认
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="remark" class="col-sm-3 control-label center ">确认要提交吗?</label>
                            @*<div class="col-sm-9">
                                    <input type="text" class="form-control" id="update_updateDate" name="updateDate">
                                </div>*@
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button onclick="trigger_stay()" type="button" class="btn btn-default" data-dismiss="modal">
                            取消
                        </button>
                        <!-- <button type="submit" onclick="trigger_delete()" class="btn btn-primary" data-dismiss="modal">
                            确认
                        </button><span id="tip"> </span> -->
                        <button type="submit" v-on:click.prevent="trigger_add, check_form" class="btn btn-primary">
                            确认
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </form>
</div>

@section Javascript{

    <script>
            var vm = new Vue({
                el: "#app",
              data: {
                  TrueName: '',
                  UserName: '',
                  UserPass: '',
                  ValUserPass:'',
                   Idcard: '',
                   BagId: '',
                  Phone: '',
                  Address: '',
                  Email: '',
                  AgreePolicy: false
                },
               methods: {
                   empty_check: function () {
                       flag = true;
                       if (!this.UserName) {
                           return false;
                       }
                       if (!this.UserPass) {
                           return false;
                       }
                       if (!this.Phone) {
                           return false;
                       }

                       if (!this.Address) {
                           return false;
                       }

                       if (!this.Email) {
                           return false;
                       }

                       if (!this.ValUserPass || this.ValUserPass != this.UserPass) {
                           return false;
                       }
                       if (!this.TrueName) {
                           return false;
                       }
                       if (!this.Idcard) {
                           return false;
                       }
                       return true;
                   },

                        // 提交表单
                   check_form: function () {
                       if (!empty_check()) {
                           $('#addModal').modal('hide');
                           return false;
                       }
                       var act = $.trim($('#act').val());
                       var form_data = $('#form_data').serialize();
                       sendUrl = '@Url.Action("Add","User")';
                       sendData = new FormData();
                       sendData.append('Action', act);
                       sendData.append('UserName', this.UserName);
                       sendData.append('UserPass', this.UserPass);
                       sendData.append('Email', this.Email);
                       sendData.append('Address', this.Address);
                       sendData.append('Phone', this.Phone);
                       sendData.append('Idcard', this.Idcard);
                       sendData.append('TrueName', this.TrueName);
                       //console.log(sendData);
                       // 异步提交数据到Action/GetBagItemByID页面
                       axios({
                           url: sendUrl,
                           method: "post",
                           responseType: 'json',
                           data: sendData,
                           transformRequest: [function (data) {
                               // 对 data 进行任意转换处理
                               return data;
                           }],
                           // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                           transformResponse: [function (data) {
                               // 对 data 进行任意转换处理
                               return data;
                           }],

                       }).then((data) => {
                           if (data > 0) {
                               // document.location.href='system_notice.php'
                               $('#addModal').modal('hide');
                               //location.reload();
                               commonUtil.alert('成功','注册成功', 'success');
                           }
                           else {
                               commonUtil.alert('失败', '注册失败，已有相同用户名', 'danger');
                               $('#addModal').modal('hide');
                           }
                       }).catch(error => {
                           alert(error);
                           $('#addModal').modal('hide');
                       });

                    }


                },
                watch: {
                    //Idcard: {
                    //    deep: true,
                    //    handler(obj) {
                    //        if (!this.Idcard) {
                    //            $('#IDCard_div')[0].className = 'col-sm-10 has-error';
                    //            $('#IDCard_tip')[0].innerText = '身份证输入不合法';
                    //            flag = false;
                    //        } else {
                    //            $('#IDCard_div')[0].className = 'col-sm-10 has-success';
                    //            $('#IDCard_tip')[0].innerText = '输入正确';
                    //        }
                    //    }
                    //}

               },
              mounted: function () {

               },
              created() {
                   $('#addModal').on('hide.bs.modal', function () {
                       // 关闭时清空edit状态为add
                       $('#reset_btn').click();
                       return false;
                   });
                }
            });
    </script>
}
